<template>
    <edu-dialog :title="$t(title)" width="40%" ref="uploadDialog" @confirm="uploadFile">
        <el-form label-width="85px">
            <el-row>
                <el-form-item>
                    <edu-upload
                        ref="upload"
                        :data="data"
                        :before-upload="beforeAvatarUpload"
                        :before-remove="beforeRemove"
                        @on-success="uploadDone"
                        :auto-upload="autoUpload"
                        :multiple="multiple"
                        :limit="limit"
                        :accept="accept"
                        :action="action"
                        :type="type"
                        :size="size"
                        :tip="tip"
                    ></edu-upload>
                </el-form-item>
            </el-row>
        </el-form>
    </edu-dialog>
</template>
<script>
import UTILS from "common/src/utils/utils";
/**
 * 上传组件
 */
export default {
    name: "EduUploadDialog",
    props: {
        title: {
            type: String,
            default: "message.import"
        },
        autoUpload: null,
        multiple: null,
        limit: null,
        accept: null,
        action: null,
        data: null,
        tip: null,
        type: {
            default: ["image/jpeg", "image/png", "image/jpg"],
            type: Array
        },
        size: {
            default: 1,
            type: Number
        }
    },
    data() {
        return {};
    },
    mounted() {},
    created() {},
    methods: {
        open() {
            this.$refs.uploadDialog.open();
        },
        onOpen() {
            setTimeout(() => {
                this.$emit("open");
            }, 300);
        },
        close() {
            this.clearFiles();
            this.$refs.uploadDialog.close();
        },
        onClose() {
            this.$emit("close");
        },
        clearFiles() {
            this.$refs.upload.clearFiles();
        },
        uploadFile() {
            if (this.$refs.upload.isEmpty()) {
                this.$message({
                    type: "info",
                    message: this.$t("message.selectFilePlease")
                });
                return;
            }
            this.$refs.upload.submit();
        },
        uploadDone(res, file, fileList) {
            if (res.msg) {
                this.$message({ type: "info", message: res.msg });
            } else {
                this.$message({
                    type: "success",
                    message: this.$t("message.addSuccess")
                });
            }
            this.close();
            this.$emit("on-success");
        }
    }
};
</script>

<style lang="scss">
</style>
